<template>
    <div class="home">
      <template v-for="(group, index) in cardsGroup" :key="index">
        <div class="block-row">
          <div
            class="card-wrapper"
            v-for="(item, idx) in group"
            :key="item.id"
            :class="{ 'last-item': idx === group.length - 1 }"
          >
            <Card :title="item.title" :count="item.count" />
          </div>
        </div>
      </template>
    </div>
  </template>
  
  <script setup>
  import Card from './card.vue'
  import { ref, computed, getCurrentInstance, onMounted } from 'vue'
  import VueCookies from 'vue-cookies';
  import axios from 'axios'

  const { proxy } = getCurrentInstance();
  const rul = 'http://localhost:8081/api/draftBoxArticle';

  // 如果 loginInfo 存在，则从中取出 account 字段，否则返回 null
  const loginInfo = VueCookies.get("loginInfo");
  const account = loginInfo ? loginInfo.account : null; 
  
  const data = ref([
  {
        title: "总浏览量",
        count: 869
    },
    {
        title: "总评论量",
        count: 78
    },
    {
        title: "总收藏量",
        count: 6
    },
    {
        title: "点击量",
        count: 869
    },
    {
        title: "留言",
        count: 8
    },
    {
        title: "简历联系",
        count: 9
    },
  ])


  
  // 预加载数据
  async function preload(){
    const resData = {
      userAccount: account
    }
    console.log(account);

    try{
      const res = await axios.post(url, resData);
      if(res.data.code === 2000){
        data.value = res.data.tableData;
      }else {
        proxy.$message.error(res.data.message);
        tableData.value = [];
      }
    }catch(e)
    {
      proxy.$message.error('获取获取失败');
    }
  }


  
  const cardsGroup = computed(() => {
    const result = []
    for (let i = 0; i < data.value.length; i += 3) {
      result.push(data.value.slice(i, i + 3))
    }
    return result
  })

  onMounted(() => {
    preload();
  })
  
  </script>
  
  <style lang="scss">
  .home {
    padding: 20px;
  
    .block-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
  
      &:last-of-type {
        margin-bottom: 0;
      }
    }
  
    .card-wrapper {
      width: calc(100%);
      margin-right: 10px;
  
      &.last-item {
        margin-right: 0;
      }
    }
  }
  </style>
  